<template>
  <div class="mall-class page" ref="webview">
    <div class="mall-search bg_grey">
      <div class="van-icon van-icon-arrow-left" @click="$router.go(-1)"></div>
      <div class="search">
        <van-field v-model="textValue" readonly class="input" @click="goSearch" :clearable='true' placeholder="搜索商品/店铺">
          <template #left-icon>
            <i class="icon-search"></i>
          </template>
        </van-field>
      </div>
    </div>
    <div class="nav-bar-srot">
      <span class="tab" :class="{active: sortActive === 1}" @click="onChangeSrot(1)">综合</span>
      <div class="tab" :class="{active: sortActive === 2}">
        <span class="sort" :class="{desc: sortType == 'sales-desc',asc: sortType == 'sales-asc', active: sortActive === 3}" @click="onChangeSrot(2)">销量</span>
      </div>
      <div class="tab" :class="{active: sortActive === 3}">
        <span class="sort" :class="{desc: sortType == 'price-desc',asc: sortType == 'price-asc'}" @click="onChangeSrot(3)">价格</span>
      </div>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:100%">
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">暂无数据</div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
          <div class="rows-wp">
            <template v-for="(item,index) in dataList">
              <div class="rows" :key="index" @click="goGoods(item.goods_sn)">
                <div class="row-img">
                  <van-image :width="$tools.toPX(230)" :height="$tools.toPX(230)" fit="contain" lazy-load :src="item.goods_img">
                    <template v-slot:loading>
                      <van-loading type="spinner" size="24" />
                    </template>
                  </van-image>
                </div>
                <div class="info">
                  <div class="name van-multi-ellipsis--l2">{{item.goods_name}}</div>
                  <div class="coupon_sale_mark" v-if="item.couponInfo">{{item.couponInfo && item.couponInfo.coupon_name}}</div>
                  <div class="price">
                    <span class="m-price">{{item.shop_price}}</span>
                  </div>
                  <div class="shop" @click.stop="goStore(item.shop_id)">{{item.appraise_num}}%好评 {{item.shop_name}}></div>
                </div>
              </div>
            </template>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'mallClass',
  data () {
    return {
      textValue: '',
      sortType: '', // 排序类型
      apiUrl: 'goodslist',
      apiType: 'goods',
      sortActive: 1, // 当前选中排序字段
      getTitle: sessionStorage.getItem('title')
    };
  },
  mixins: [mixins],
  // 缓存了页面使用 created钩子
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList('goodslist', true);
    });
  },
  mounted () {
    this.textValue = this.$route.query.searchValue;
  },
  methods: {
    // 去详情
    goGoods (sn) {
      this.$router.push({ 'path': '/mall/goods', query: { sn: sn } });
    },
    // 跳转搜索
    goSearch () {
      this.$router.push({ 'path': '/search' });
    },
    // 去店铺
    goStore (id) {
      this.$router.push({ 'path': '/store', query: { id: id } });
    },
    // 排序
    onChangeSrot (data) {
      this.dataList = [];
      this.sortActive = data;
      // this.params.catId =
      // 综合排序
      if (data === 1) {
        this.sortType = '';
        this.getList('goodslist', true);
      }
      // 销量、价格排序
      if (data === 2 || data === 3) {
        // 判断是销量还是价格
        if (data === 2) {
          this.sortType = this.sortType === 'sales-asc' ? 'sales-desc' : 'sales-asc';
        } else {
          this.sortType = this.sortType === 'price-asc' ? 'price-desc' : 'price-asc';
        }
        this.params = {
          ob: data === 2 ? '1' : '2',
          catId: this.$route.query.id,
          shopCatId: this.$route.query.shopCatId,
          doa: this.sortType === 'sales-asc' || this.sortType === 'price-asc' ? '0' : '1'
        };
        this.getList('goodslist', true);
      }
    }
  },
  created () {
    if (this.$route.query.id) {
      this.params.catId = this.$route.query.id;
    }
    if (this.$route.query.shopCatId) {
      this.params.shopCatId = this.$route.query.shopCatId;
    }
  }
};
</script>
<style lang="less" scoped>
.mall-class {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .nav-bar-srot {
    display: flex;
    border-bottom: 1px solid rgba(238, 238, 238, 0.6); /*no*/
    .tab {
      flex: 1;
      display: block;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      color: #353535;
      .sort {
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 15px;
          position: absolute;
          top: 6px;
          right: -28px;
          height: 30px;
          background-image: url('/static/images/icon-sort.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
      .sort.asc {
        &::after {
          background-image: url('/static/images/icon-sort-asc.png');
          transform: rotate(180deg);
        }
      }
      .sort.desc {
        &::after {
          background-image: url('/static/images/icon-sort-asc.png');
        }
      }
    }
    .tab.active {
      color: #ff0034;
    }
    .tab.price {
    }
  }
  .content {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    overflow: auto;

    .rows {
      display: flex;
      padding: 20px 25px;
      // border-bottom: 1px solid #f4f4f4; /*no*/
      .row-img {
        width: 230px;
        height: 230px;
        margin-right: 36px;
        border-radius: 10px;
        img {
          width: 230px;
          height: 230px;
          object-fit: cover;
          border-radius: 10px;
        }
      }
      .info {
        flex: 1;
        .price {
          color: #ff0034;
          font-size: 36px;
          padding: 0 0 10px;
          font-weight: 800;
          .text {
            font-size: 24px;
            vertical-align: middle;
          }
        }
        .shop {
          color: #959595;
          font-size: 24px;
        }
        .name {
          font-size: 30px;
          padding: 15px 0 5px;
          color: #353535;
        }
        .attr {
          font-size: 24px;
          color: #959595;
          padding: 5px 0;
        }
        .coupon_sale_mark {
          color: #ff0034;
          font-size: 24px;
          border-radius: 8px;
          font-weight: 500;
          display: inline-block;
          border: 1px solid #ff0034; /*no*/
          padding: 4px 10px;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
